<template>
	<div style="position: relative;">
		<h3>Tooltips with Vue 3 Teleport</h3>
		<div>
			<modal-button></modal-button>
		</div>
	</div>
</template>

<script>
import Vue from "vue";
var modalButton = {
	template: `
                <button @click="modalOpen = true">
                    打开弹窗
                </button>
				<teleport to="body">
                <div v-if="modalOpen" class="modal">
                <div>
                    I'm a modal!
                    <button @click="modalOpen = false">
                    Close
                    </button>
                </div>
				</div>
				</teleport>
            `,
	data() {
		return {
			modalOpen: false
		};
	}
};
export default {
	components: {
		"modal-button": modalButton
	},
	created() {}
};
</script>

<style>
.modal {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: rgba(0, 0, 0, 0.5);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.modal div {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-color: white;
	width: 300px;
	height: 300px;
	padding: 5px;
}
</style>